<template>
  <div class="integral">
       <div class="head"><span class="ht" @click="fun()">&lt;</span><span>签到送礼</span></div>
       <div class="cen">
      <div class="sign">
          <p>我的积分<span class="num">{{this.$store.state.num}}</span><span @click="funb()">积分明细&gt;</span></p>
          <button class="btn" @click="func()">
              <img src="qiandao.png" >
              <span  class="nm">今日签到</span>
              <span>+5</span>
          </button>
          <div class="bot">
            <span>您已连续签到{{this.$store.state.nmb}}天</span>
            <div class="qd">
                <span class="tx">签到提醒</span>
                <van-switch v-model="checked" size="24px"/>  
            </div>
          </div>
      </div>
      <div class="bo"> 
            <div class="left">
              <p>赚积分</p>
              <span>积分赚不停</span>
            </div>
            <div class="tu">
              <img src="zhuanjifen.png" />
            </div>
          </div>
      </div>
  </div>
</template>
<script>
export default {
  created () {
        //在页面加载时读取localStorage里的状态信息
        if (localStorage.getItem("data") ) {
            //replaceState替换数据 Object.assign合并对象
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("data"))))
        } 
        //在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("data",JSON.stringify(this.$store.state))
        })
      },
    components:{
        
    },
    data() {
    return {
      checked: true,
    };
  },
    methods: {
    fun(){
      this.$router.push("/Mycontent")
    },
    funb(){
        this.$router.push("/detailed")
    },
    func(){
      this.$store.commit("adds")
    }
  },
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
div{
    font-size: 0;
}
.head{
  width: 100%;
  height:0.4rem;
  border-bottom: 0.01rem solid rgb(190, 170, 170);
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: #fff;
}
.head span{
    font-size: 0.14rem;
    line-height: 0.4rem;
}
.head .ht{
  font-size: 0.26rem;
  padding:0 0.2rem;
  color:red;
}
.cen{
  position: absolute !important;
  position: relative;
  top: 0.4rem !important;
  width: 100%;
  height: 100%;
}
.sign{
    float: left;
    width: 100%;
    height: 2rem;
    background-color: red;
    overflow: hidden;
}
span{
  font-size: 0.14rem;
}
.sign p{
    font-size: 0.14rem;
    padding-top:0.2rem;
    text-align: center;
}
.sign p .num{
    margin: 0 0.14rem 0 0.08rem;
}
.sign .btn{
    width: 2rem;
    height: 0.4rem;
    border-radius: 0.5rem;
    margin:0.3rem 24% ;
    background-color: #fff;
    border: none;
}
.sign .btn span{
  font-size: 0.14rem;
}
.sign .btn .nm{
    margin:0 0.1rem 0 0.2rem;
}
.sign .btn img{
  width: 0.2rem;
}
.bot{
  width: 100%;
  height: 0.3rem;
  /* background-color: rgb(163, 117, 117); */
  display: flex;
  justify-content: space-around;
   line-height: 0.3rem;
}
.bot .qd .tx{
  display: block;
}
.bot .qd .hk{
 float: right;
}
.bo{
  width: 100%;
  height:0.8rem;
  float: left;
  padding: 0.2rem 0;
  /* background-color: rgb(82, 95, 170); */
}
.left{
  width: 1rem;
  height: 0.7rem;
  margin-left: 0.3rem;
  float: left;
  line-height: 0.3rem;
}
.left p{
  font-size: 0.14rem;
  float: left;
}
.left span{
  font-size: 0.12rem;
  float: left;
}
.tu img{
  width: 0.5rem;
  color: yellow;
}
.tu{
  padding-top: 0.15rem;
  width: 0.6rem;
  height: 0.6rem;
  /* background-color: rgb(230, 163, 76); */
  float: left;
}
</style>